<template>
	<div id="homessbox">
		<div class="headerss-top">
			 <div class="hss-left">       
                <a href="/">
                    <img src="http://pub.szzhangchu.com/web/v4.2/images/ico/ico-back-black.png" width="100%">
                </a>
	        </div>
	        <div class="hss-mid">      
	                <div class="search-content" data-url="/search_index/index.html?">
	                    <div class="hss-mid-2">
	                    	<i class="hico"></i>
	                    	<input type="text" name="" id="" value="" placeholder="请输入菜名或者食材搜索"/>
	                    	
	                    </div>
	                </div>
	        </div>
	        <div class="hss-right">
                <a href="/login/index.html?">
                    		搜索
                </a>
	        </div>			
		</div>
		
		<div class="headerss-mid">
			<p>热门搜索</p>
			<ul>
				<li v-for="x in arr"><a href="">{{x.text}}</a></li>
			</ul>
		</div>
		
		<div class="headerss-fot">
			<p class="headerss-fot1">历史搜索</p>
			<p class="headerss-fot2">暂无搜索历史</p>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				arr:[]
			}
		},
		mounted(){
			fetch("./static/homess.json").then(function(res){
				return res.json();
			})
			.then((res)=>{
				this.arr=res.data.data;
			})
		}
	}
</script>

<style>
	#homessbox{
		position: relative;
		overflow: hidden;
		font-size: 0.28rem;
		background: #eee;
		height: 100vh;
		}
	.headerss-top{
		display: flex;
		align-items: center;
		/*justify-content: space-between;*/
		width: 100%;
		height:0.8rem;
		background-color:#fff;
		border-bottom: 1px solid #f2f2f2;
		
		
		}
	.headerss-top .hss-left{
		width: 0.55rem;
		height: 0.5rem;
		}
		.hss-right a{
			width: 0.7rem;
			color: #A0A0A0;
			font-size: 0.28rem;
			margin-left: 0.15rem;
		}
	.headerss-top .hss-left a,{
			display: inline-block;
			width: 100%;
		}
	.hss-mid{
		width: 5rem;
		height: 0.55rem;
		line-height: 0.55rem;
		color: #828282;
		border-radius: 0.05rem;
		background: #e6e6e6;
	}
	.hss-mid-2{
		display: flex;
		width: 100%;
		justify-content: center;
		font-size: 0.23rem;
		position: relative;
		z-index: 2;
	}
	.hss-mid-2 input{
		width: 100%;
		height: 100%;
		background: #e6e6e6;
		border: none;
		position: absolute;
		padding-left: 1.7rem;
		outline:none
	}
	.hico{
		margin-right: 0.2rem;
		display: inline-block;
		width: 0.5rem;
		height: 0.5rem;
		background-image: url("http://pub.szzhangchu.com/web/v4.2/images/ico/ico-search-gray.png");
		background-size: cover;
		z-index: 2;
		margin-right: 3rem;
	}
	.headerss-mid{
		margin-top: 0.15rem;
		width: 100%;
		background: #fff;
		padding: 0.2rem 0 0.3rem 0.2rem;
	}
	.headerss-mid p{
		font-size: 0.23rem;
		
	}
	.headerss-mid ul{
		width: 100%;
		line-height: 0.9rem;
		display: flex;
		flex-wrap: wrap;
	}
	.headerss-mid a{
		padding: 0.08rem 0.23rem;
		margin-right: 0.2rem;
		border: 1px solid #ff8f5c;
		color: #5d5d5d;
	}
	.headerss-fot{
		margin-top: 0.15rem;
		padding: 0.2rem 0 0.3rem 0.1rem;
		background: #fff;
		font-size: 0.23rem;
	}
	.headerss-fot2{
		margin-top: 0.1rem;
		text-align: center;
		color: #999;
	}
</style>